<template>
    <div class="form">
        <el-form
            ref="formRef"
            :model="formData"
            label-width="100px"
            :size="'default'"
            status-icon
        >
            <el-form-item>
                <!-- <el-tag type="info">计划名称：{{ formData.plan_name }}</el-tag> -->
                <el-text class="mx-1" size="large"
                    >计划名称：{{ formData.plan_name }}</el-text
                >
            </el-form-item>
            <el-form-item>
                <el-input
                    type="textarea"
                    v-model.trim="formData.cntrs"
                    style="width: 240px"
                    :autosize="{ minRows: 10, maxRows: 20 }"
                ></el-input>
            </el-form-item>
        </el-form>
    </div>
    <div class="btn-group">
        <el-button-group>
            <el-button
                class="btn"
                type="primary"
                v-debounce="save"
                size="large"
            >
                保存
            </el-button>
        </el-button-group>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { Request } from '@/app/request';
import { ElMessage } from 'element-plus';
type PlanGateInCntr = {
    plan_id?: number;
    plan_name?: string;
    cntrs?: string;
};
const props = defineProps<{
    data: PlanGateInCntr;
}>();
const formData = reactive<PlanGateInCntr>({});
const emit = defineEmits<{
    close: [];
}>();
onMounted(() => {
    Object.assign(formData, props.data);
});
const save = async () => {
    
    const cntrArray = formData.cntrs?.split(/','|\n|\s/);
    const cntrP: Array<string> = [];
    for (let index = 0; index < cntrArray!.length; index++) {
        const element = cntrArray![index];
        const regex = new RegExp(
        /^([A-Z]{3}[U]\d{6}[0-9])$/gm
        );
        if (element) {
            if (!regex.test(element.trim().toUpperCase())) {
                ElMessage.info(`非法箱号${element}`);
                return;
            } else {
                cntrP.push(element.trim().toUpperCase());
            }
        }
    }
    if (cntrP.length > 0) {
        const req = new Request('进场计划箱导入', {
            plan_id: formData.plan_id,
            cntrs: cntrP,
        });
        const r = await req.post();
        if (r.code > 100) {
            emit('close');
            return true;
        }
    } 
};
</script>
<style lang="scss" scoped>
.form {
    margin: 20px 0;
    padding: 10px 10px;
    border: solid 2px var(--el-color-primary);
    box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.btn-group {
    .btn {
        margin-right: 5px;
    }
}
</style>
